<template>
    <div class="shop-index">
        <div class="ls-card header">
            <el-form :inline="true" :model="searchObj" class="demo-form-inline" size="small">
                <el-form-item label="商城信息">
                    <el-input class="ls-input" v-model="searchObj.shop_info" placeholder="请输入商城编号或商城名称"></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="searchObj.create_time"
                        type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="商城状态">
                    <el-select class="ls-input" v-model="searchObj.status" placeholder="全部">
                        <el-option label="全部" :value="''"></el-option>
                        <el-option label="正常" :value="1"></el-option>
                        <el-option label="关闭" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getShopLists">查询</el-button>
                    <el-button type="style" @click="reset">重置</el-button>
                    <export-data class="m-l-10" :pageSize="pager.size" :method="apiShopLists" :param="searchObj">
                    </export-data>
                </el-form-item>
            </el-form>
        </div>

        <div class="ls-card m-t-16">
            <div class="m-b-16">
                <el-button type="primary" size="small" @click="$router.push('/shop/lists_detail')">新增商城</el-button>
            </div>

            <el-table :data="pager.lists" ref="paneTable" style="width: 100%;" size="mini" v-loading="pager.loading">
                <!-- ID -->
                <el-table-column label="ID" prop="id" width="60"></el-table-column>
                <!-- 商城编号 -->
                <el-table-column prop="sn" label="商城编号" min-width="100">
                </el-table-column>
                <!-- 商城名称 -->
                <el-table-column label="商城名称" min-width="200">
                  <template slot-scope="scope">
                    <div class="flex col-center">
                      <el-image :src="scope.row.logo" style="width: 40px;height: 40px"></el-image>
                      <div class="m-l-10">{{ scope.row.name }}</div>
                    </div>
                  </template>
                </el-table-column>
                <!-- 管理员账号 -->
                <el-table-column prop="account" label="管理员账号" min-width="120">
                </el-table-column>
                <!-- 状态 -->
                <el-table-column prop="status" label="状态" min-width="120">
                    <template slot-scope="scope">
<!--                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"-->
<!--                            @change="shopSwitchStatusEdit($event, scope.row.id)">-->
<!--                        </el-switch>-->
                        <span :style="{'color': scope.row.status == 1 ? '#0BC366':'#FF2C3C'}">{{scope.row.status_desc}}</span>
                    </template>
                </el-table-column>
                <!-- 用户人数 -->
                <el-table-column prop="user_num" label="用户人数" min-width="120">
                </el-table-column>
                <!-- 营业额 -->
                <el-table-column prop="order_amount" label="营业额" min-width="120">
                </el-table-column>
                <!-- 创建时间 -->
                <el-table-column prop="create_time" label="创建时间" min-width="160">
                </el-table-column>
                <!-- 当前套餐 -->
                <el-table-column prop="set_meal_name" label="当前套餐" min-width="200">
                </el-table-column>
                <!-- 到期时间 -->
                <el-table-column prop="expires_time" label="到期时间" min-width="180">
                </el-table-column>
                <!-- 套餐使用状态 -->
                <el-table-column prop="expires_status" label="套餐使用状态" min-width="100">
                  <template slot-scope="scope">
                    <div  style="color: #0BC366" v-if="scope.row.expires_status === '使用正常'">使用正常</div>
                    <div style="color: #FF7C1D" v-if="scope.row.expires_status === '即将到期'">即将到期</div>
                    <div style="color: #FF2C3C" v-if="scope.row.expires_status === '已过期'">已过期</div>
                  </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column fixed="right" label="操作" min-width="200">
                    <template scope="scope">
                        <div class="flex">
                            <!-- 详情 -->
                          <el-popover
                              placement="top"
                              width="500"
                              trigger="hover"
                          >
                            <el-button slot="reference" type="text" size="small" @click="toShop(scope.row.shop_admin_url ,scope.row.status)">进入商城</el-button>

                            <div class="m-t-10">
                              管理后台: <el-button type="text" @click="toShop(scope.row.shop_admin_url ,scope.row.status)" >{{scope.row.shop_admin_url }}</el-button>
                            </div>
                            <div class="m-t-10">
                              PC商城: <el-button type="text" @click="toShop(scope.row.shop_pc_url ,scope.row.status)" >{{scope.row.shop_pc_url}}</el-button>
                            </div>
                            <div class="m-t-10">
                              移动端商城: <el-button type="text" @click="toShop(scope.row.shop_mobile_url ,scope.row.status)">{{scope.row.shop_mobile_url}}</el-button>
                            </div>
                          </el-popover>

                            <div class="inline m-l-10 m-r-10">
                              <el-button @click="toShopEdit(scope.row.id)" type="text" size="small">编辑</el-button>
                            </div>

                          <el-dropdown>
                            <span class="el-dropdown-link primary">
                              更多<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item>
                                <el-button @click="toSuperAdminUpdate(scope.row.id)" type="text" size="small">修改账号
                                </el-button>
                              </el-dropdown-item>
                              <el-dropdown-item>
                                <!-- 删除商城 -->
                                <ls-dialog class="inline" title="商家备注" @confirm="changeRemarks(scope.row.remark, scope.row.id)">
                                  <el-button slot="trigger" type="text" size="small">商家备注</el-button>
                                  <div>
                                    <el-input class="m-t-10" type="textarea" :rows="5" placeholder="请输入内容" v-model="scope.row.remark">
                                    </el-input>
                                  </div>
                                </ls-dialog>
                              </el-dropdown-item>
                              <el-dropdown-item>
                                <!-- 删除商城 -->
                                <ls-dialog class="m-l-10 inline" @confirm="onShopDelete(scope.row)">
                                  <el-button type="text" size="mini" slot="trigger">删除
                                  </el-button>
                                </ls-dialog>
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>

                        </div>
                    </template>
                </el-table-column>
            </el-table>

          <div class="flex row-right m-t-24">
            <ls-pagination v-model="pager" @change="getShopLists()"></ls-pagination>
          </div>
        </div>
    </div>
</template>

<script lang="ts">
import { apiShopLists, apiShopSwitchStatus, apiShopDelete, apiChangeRemark } from '@/api/shop'
import { Component, Prop, Vue } from 'vue-property-decorator'
import lsPagination from '@/components/ls-pagination.vue'
import ExportData from '@/components/export-data/index.vue'
import LsDialog from '@/components/ls-dialog.vue'
import { RequestPaging } from '@/utils/util'
@Component({
  components: {
    lsPagination,
    ExportData,
    LsDialog
  }
})
export default class ShopList extends Vue {
  /** S Data **/

    apiShopLists = apiShopLists;

    pager: RequestPaging = new RequestPaging();

    searchObj: Object = {
      status: '',
      shop_info: '',
      create_time: ''
    };
    /** E Data **/

    /** S Methods **/

    // 获取商城列表
    getShopLists (): void {
      this.pager.request({
        callback: apiShopLists,
        params: {
          ...this.searchObj
        }
      })
    }

    // 修改商城状态
    async shopSwitchStatusEdit (status: number, id: number): Promise<void> {
      await apiShopSwitchStatus({ id })
      this.getShopLists()
    }

    async changeRemarks (text: string, id: number): Promise<void> {
      await apiChangeRemark({ id: id, remark: text })
      this.getShopLists()
    }

    // 删除商城
    async onShopDelete (row: any): Promise<void> {
      await apiShopDelete({ id: row.id })
      this.getShopLists()
    }

    // 重置搜索
    reset (): void {
      Object.keys(this.searchObj).map((key) => {
        this.$set(this.searchObj, key, '')
      })
      this.getShopLists()
    }

    // 去编辑商城
    toShopEdit (id: number | any): void {
      this.$router.push({
        path: '/shop/lists_detail',
        query: {
          id: id
        }
      })
    }

    // 修改超级管理员
    toSuperAdminUpdate (id: number | any): void {
      this.$router.push({
        path: '/shop/modify_account',
        query: {
          id: id
        }
      })
    }

    // 去商家后台
    toShop (url: any, status: number) {
      if (status == 0) return this.$message.error('该商城暂未营业中')

      if (url.indexOf('https://') === 0) window.open(url)
      else if (url.indexOf('http://') === 0) window.open(url)
      else window.open('http://' + url)
    }

    /** E Methods **/

    /** S ods **/
    created () {
      this.getShopLists()
    }
}
</script>
<style lang="scss" scoped>
/deep/ .header .el-form-item {
    margin-bottom: 0;
}
.ls-input {
    width: 280px;
}
</style>
